<template>
  <view class="mb-4">
    <text v-if="title" class="text-base font-bold mb-2 block" :class="titleClass">{{ title }}</text>
    <view class="card-grid">
      <view v-for="book in books" :key="book.id"
        class="card-item"
        :style="{ background: book.bg }">
        <view class="absolute top-2 left-2 bg-black/80 text-white text-xs px-2 py-0.5 rounded-full z-10">
          {{ book.count }}本
        </view>
        <text class="font-bold text-white text-sm mt-6 mb-1">{{ book.title }}</text>
        <text class="text-xs text-white/80">{{ book.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

defineProps<{
  title?: string
  books: Array<{ id: number, title: string, desc: string, count: number, bg: string }>
  titleClass?: string
}>()
</script>

<style scoped>
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card-item {
  width: calc((100% - 32px) / 3);
  height: 140px;
  border-radius: 16px;
  padding: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
</style> 